<template>
  <div>
    <!-- {{ img }}
    <UpLoading v-model="img" /> -->
    <!-- 表单 -->
    <div class="box">
      <el-card>
        <div class="top">
          <el-form class="form" label-width="80px">
            <el-form-item prop="username" label="用户名称">
              <el-input v-model="form.username" class="input" />
            </el-form-item>
            <el-form-item prop="email" label="用户邮箱">
              <el-input v-model="form.email" class="input" />
            </el-form-item>
            <el-form-item prop="role_id" label="用户角色">
              <!-- <el-input class="input" /> -->
              <el-select placeholder="请选择" v-model="form.role_id">
                <el-option
                  v-for="item in downList"
                  :key="item.role_id"
                  :label="item.name"
                  :value="item.role_id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="button" style="margin-left: 10px">
            <el-button type="primary" @click="searchClick">搜索</el-button>
            <el-button plain @click="clearClick">清除</el-button>
            <el-button type="primary" @click="addClick">+新增用户</el-button>
          </div>
        </div>
      </el-card>
      <!-- table表格 -->
      <el-card>
        <el-table :data="list" v-loading="loading">
          <el-table-column label="序号" width="50px">
            <template v-slot="{ $index }">
              <div>
                <!-- {{ (page.page - 1) * page.size + $index + 1 }} -->
                {{ (page.page - 1) * page.limit + $index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="180px" />
          <el-table-column prop="phone" label="电话" width="160px" />
          <el-table-column prop="email" label="邮箱" width="160px" />
          <el-table-column label="角色" width="150px">
            <template v-slot="{ row }">
              <div v-role="row.role_id"></div>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" width="220px" />
          <el-table-column prop="status" label="状态" width="95px">
            <template v-slot="{ row }">
              <el-switch
                v-model="row.status"
                :active-value="1"
                :inactive-value="0"
                active-color="skyblue"
                inactive-color="pink"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="row.id" label="操作">
            <template v-slot="{ row }">
              <el-button type="text" @click="editClick(row)">编辑</el-button>
              <el-button type="text" @click="OFclick(row)">
                <template>
                  <div
                    :class="{ color: row.status === 1 }"
                    v-statusTwo="row.status"
                  ></div>
                </template>
              </el-button>
              <el-button type="text" @click="removeClick(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 分页 -->
      <el-card>
        <div class="block">
          <el-pagination
            :current-page.sync="page.page"
            :page-sizes="[1, 2, 3, 4, 10, 20, 30, 50]"
            :page-size.sync="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
    <Add ref="add" @getData="getData" />
  </div>
</template>

<script>
import Add from './components/add.vue'
import { userListAPI, userListRemoveAPI, userListStatusAPI } from '@/api/user'
import jsCookie from 'js-cookies'
export default {
  components: {
    Add
  },
  data () {
    return {
      loading: true,
      img: '',
      list: [{}, {}],
      page: {
        page: 1, //	是	1	页码
        limit: +jsCookie.getItem('employees_size') || 1 //	是	10	每页条数
      },
      total: 1,
      value: true,
      color: false,
      form: {
        username: '',
        email: '',
        role_id: ''
      },
      downList: [
        { name: '管理员', role_id: '1' },
        { name: '老师', role_id: '2' },
        { name: '学生', role_id: '3' }
      ]
    }
  },
  created () {
    this.getData()
  },
  methods: {
    handleSizeChange () {
      jsCookie.setItem('employees_size', this.page.limit)
      // console.log(this.total);
      this.getData()
    },
    handleCurrentChange () {
      this.getData()
    },
    async getData () {
      const res = await userListAPI({ ...this.form, ...this.page })
      // console.log("res:", res);
      this.list = res.data.items
      this.total = res.data.pagination.total
      // console.log('res:', res)
      this.loading = false
    },
    addClick () {
      this.$refs.add.show = true
      this.$refs.add.mode = 'add'
    },
    editClick (row) {
      this.$refs.add.show = true
      console.log('row', row)
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      this.$refs.add.form.role_id = String(row.role_id)
      this.$refs.add.form.status = String(row.status)
      this.$refs.add.mode = 'edit'
    },
    async removeClick (id) {
      this.$confirm('您确定删除该员工嘛', '温馨提示').then(async () => {
        await userListRemoveAPI(id)
        if (this.list.length === 1 && this.page.page > 1) {
          this.page.page--
        }
        this.$message.success('删除用户成功')
        this.getData()
      })
    },
    async OFclick (row) {
      await userListStatusAPI(row.id)

      this.getData()
    },
    async searchClick () {
      this.page.page = 1
      this.getData()
    },
    clearClick () {
      this.form = {
        username: '',
        email: '',
        role_id: ''
      }
      this.getData()
    }
  }
}
</script>

<style scoped lang="less">
.color {
  color: red;
}
.box {
  // margin: 20px;
  .top {
    display: flex;
    margin-bottom: 10px;
    .form {
      display: flex;
      ::v-deep .el-form-item__label {
        font-weight: normal;
      }
      .input {
        width: 200px;
      }
    }
  }
  .block {
    text-align: center;
  }
}
</style>
